@use "sass:math";

.nav {
  height: #{math.div(42, $base-font-size)}rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;

  & button {
    padding: 0;
  }
}

.nav__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  @include themify() {
    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
  }
  // padding-left: #{math.div(20, $base-font-size)}rem;
}

.nav__menubar {
  display: flex;
  flex-direction: row;
  width:100%;
  justify-content: space-between;
}

.nav__items-left,
.nav__items-right {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.preview-nav__editor-svg {
  @include icon();
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  & button {
    padding: #{math.div(12, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
  }
}

// base focus styles
.nav__item button:focus {  
  @include themify() {
    background-color: getThemifyVariable('nav-hover-color');
  }
  
  .nav__item-header {
    @include themify() {
      color: getThemifyVariable('button-hover-color');
    }
  }

  .nav__item-header-triangle polygon,
  .nav__item-header-triangle path {
    @include themify() {
      fill: getThemifyVariable('button-hover-color');
    }
  }  
}


.nav__dropdown-item {
  & button:focus,
  & a:focus {
    @include themify() {
      color: getThemifyVariable('button-hover-color');
      background-color: getThemifyVariable('nav-hover-color');
    }
  }
  & button:focus .nav__keyboard-shortcut,
  & a:focus .nav__keyboard-shortcut {
    @include themify() {
      color: getThemifyVariable('button-hover-color');
    }
  }

  &.nav__dropdown-item--disabled {
    & button,
    & a,
    & button:hover,
    & a:hover {
      @include themify() {
        color: getThemifyVariable('button-nav-inactive-color');
      }

      & .nav__keyboard-shortcut {
        @include themify() {
          color: getThemifyVariable('button-nav-inactive-color');
        }
      }
    }
  }
}

.nav__item--no-icon {
  padding-left: #{math.div(15, $base-font-size)}rem;
}

.nav__item-header-triangle polygon,
.nav__item-header-triangle path {
  @include themify() {
    fill: getThemifyVariable('icon-color');
  }
}

.nav__item:hover {
  @include themify() {
    background-color: getThemifyVariable('nav-hover-color');
  }

  .nav__item-header {
    @include themify() {
      color: getThemifyVariable('button-hover-color');
    }
  }
  
  & g, & path {
    @include themify() {
      fill: getThemifyVariable('nav-hover-color');
    }
  }

  .nav__item-header-triangle polygon,
  .nav__item-header-triangle path {
    @include themify() {
      fill: getThemifyVariable('button-hover-color');
    }
  }
}

.nav__item-header:hover {
  @include themify() {
    color: getThemifyVariable('nav-hover-color');
  }
  & g, & path {
    @include themify() {
      fill: getThemifyVariable('nav-hover-color');
    }
  }
}

.nav__item-header-triangle {
	margin-left: #{math.div(5, $base-font-size)}rem;
}

.nav__dropdown {
  @include themify() {
      color: getThemifyVariable('nav-hover-color');
    }
}

.nav__item-header-triangle {
	margin-left: #{math.div(5, $base-font-size)}rem;
}

.nav__dropdown {
  @extend %dropdown-open-left;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  .nav__item--open & {
    display: flex;
  }
}

.nav__items-right {
  padding-right: #{math.div(20, $base-font-size)}rem;

  & .nav__dropdown {
    width: #{math.div(125, $base-font-size)}rem;
  }
}

.nav__item-spacer {
  @include themify() {
    color: map-get($theme-map, 'inactive-text-color');
    margin-left: #{math.div(8, $base-font-size)}rem;
  }
}

.nav__item-or {
  @include themify() {
    color: map-get($theme-map, 'inactive-text-color');
  }
}

.nav__auth-button {
  padding: #{math.div(10, $base-font-size)}rem;
}

// .nav__dropdown button {
//   padding: 0;
// }

.nav__dropdown-item {
  & button,
  & a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.nav__item-logo {
  position: relative;
  height: #{math.div(42, $base-font-size)}rem;
  width: #{math.div(56, $base-font-size)}rem;

  & span {
    position: absolute;
  }
}

.svg__logo {

  @include themify() {
    // Set background color of the logo
    background-color: getThemifyVariable('logo-color');
  }

}

.svg__logo g path{
  
  @include themify() {
    // Set internal color of the logo;
    fill: getThemifyVariable('logo-background-color');
  }

}


.nav__keyboard-shortcut {
  font-size: #{math.div(12, $base-font-size)}rem;
  font-family: Inconsololata, monospace;

  @include themify() {
    color: getThemifyVariable('keyboard-shortcut-color');
  }

  .nav__dropdown-item:hover & {
    @include themify() {
      color: getThemifyVariable('button-hover-color');
    }
  }
}

.nav__back-icon {
  & g, & path {
    opacity: 1;
    @include themify() {
      fill: getThemifyVariable('inactive-text-color');
    }
  }
  margin-right: #{math.div(5, $base-font-size)}rem;
}

.nav__back-link {
  display: flex;
}
